<template>
	<view class="page page-container">
    <!-- 背景图 -->
    <view class="page-background">
      <image class="background-image" mode='scaleToFill' :src="bgImageURL" :style="{height: (windowHeight + 3) + 'px'}"></image>
    </view>
    <!-- logo -->
    <view class="page-logo">
      <image class="logo-image" src="/static/logo.png" :style="[{top: logoHeight + 'px'}, {left: logoWidth + 'px'}]"></image>
    </view>
    <!-- title text -->
    <view class="page-title" @click="enter">
      <text space="emsp" class="title-text">{{title}}</text>
    </view>
    <i class="iconfont icon-dianji icon-click" :style="[{top: iconClickHeight + 'px'}, {left: iconClickWidth + 'px'}]"></i>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        windowWidth: 0,
        windowHeight: 0,
        logoHeight: 0,
        logoWidth: 0,
        iconClickHeight: 0,
        iconClickWidth: 0,
        bgImageURL: '',
        bgImagePath: '../static/images/index/splash/',
        logoImgURL: '../static/logo.png',
        title: '精 致 生 活 一 立 方'
			}
		},
    onLoad() {
      let bgImageName = 'splash' + Math.floor(Math.random()*7) + '.jpg';
      this.bgImageURL = this.bgImagePath + bgImageName;
      console.log(this.bgImageURL)
    },
		onReady: function() {
		  let that = this;
		 uni.getSystemInfo({
		    success(res) {
		      that.windowHeight = res.windowHeight;
          that.windowWidth = res.windowWidth;
          that.logoHeight = that.windowHeight / 4 - 50;
          that.logoWidth = (that.windowWidth -100) / 2;
          that.iconClickHeight = that.windowHeight / 2 + 20;
          that.iconClickWidth = that.windowWidth - 70;
		    }
		  })
      },
		methods: {
      enter() {
        uni.preloadPage({url: "./home/index"});
        uni.switchTab({
          url: './home/index'
        })
      }
		}
	}
</script>

<style>
	.page-container {
    height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    overflow: hidden;
	}
  
  .page-background {
    height: fit-content;
    width: 100%;
    overflow: hidden;
  }
  
  .background-image {
    height: fit-content;
    width: 100%;
    z-index:1;
  }

  .page-logo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
  }
  
	.logo-image {
    position: absolute;
		height: 200rpx;
		width: 200rpx;
		margin-top: 20rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
	}

 .page-title {
   position: absolute;
   padding: 30px;
   z-index: 100;
  }
  
  .title-text {
    font-size: 42rpx;
    font-weight: bold;
    font-family: STKaiti;
  }
  
  .icon-click {
/*    width: 2em; 
    height: 2em; */
    font-size: 22px;
    position: absolute;
    left: 20px;
    z-index: 100;
  }
  
	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
